<template>
    <ul>
        <li
            v-for="(ele, index) in item.iconList"
            :key="index"
            @click.stop="
                leftItemClick({
                    ele,
                    item,
                })
            "
        >
            <SvgIcon
                :icon-class="ele.iconName"
                class="iconClass"
                width="42px"
                height="32px"
            />
            <span :class="getActiveSty(ele.isActive)">
                {{ ele.text }}
            </span>
        </li>
    </ul>
</template>

<script setup lang="ts">
import type {
    children,
    listItem,
} from "@/components/map/components/mapToolsItem/index";

const emit = defineEmits(["changeLayer"]);
const props = defineProps({
    item: {
        required: true,
        default: {} as children,
    },
});

const getActiveSty = (isActive: Boolean) => {
    if (isActive) return "active";
};
const leftItemClick = (obj: any) => {
    obj.item.iconList.forEach((ele: any) => {
        ele.isActive = ele.text === obj.ele.text;
    });
    emit("changeLayer", obj);
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.active {
    color: red;
}
ul {
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: scroll;
    @include flexLayout;
    li {
        @include flexLayout;
        display: flex;
        flex-direction: column;
        margin-left: 8px;
        &:first-child {
            margin-left: 0;
        }

        span {
            margin-top: 6px;
            box-shadow:
                0 0 1px 0 rgba(24, 94, 224, 0.15),
                0 6px 12px 0 rgba(24, 94, 224, 0.15);
        }
        .iconClass {
            border-radius: 12px;
        }
    }
}
</style>
